//disallowed
.literal
  color: mediumslateblue


.linear-gradient-func
  background: linear-gradient(top, #fff, white)


.box-shadow
  box-shadow: 1px 1px black, 1px 1px black


.background
  background: 1px solid white


.hex
  color: #fff


.adj
  color: adjust-color(rgb(255, 0, 0), $blue: 5)


.scale
  color: scale-color(hsl(120, 70%, 80%), $lightness: 50%)


.change
  color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8)


.function
  color: test(#fff)


.rgb
  color: rgb(255, 255, 255)


.rgba
  color: rgba(255, 255, 255, .3)


.hsl
  color: hsl(40, 50%, 50%)


.hsla
  color: hsla(40, 50%, 50%, .3)


// disallowed - using color literals as property names
$colors: (red: #fff, blue: (orange: #fff), font-color: $black)

// allowed
$black: #000
$literal: mediumslateblue
$hexVar: #fff
$rgb: rgb(255, 255, 255)
$rgba: rgba(255, 255, 255, .3)
$hsl: hsl(40, 50%, 50%)
$hsla: hsla(40, 50%, 50%, .3)

.literal
  color: $literal


.linear-gradient-func
  background: linear-gradient(top, $hexVar, $literal)


.background
  background: 1px solid $literal


.hex
  color: $hexVar


.adj
  color: adjust-color($off-red, $blue: 5)


.scale
  color: scale-color($off-blue, $lightness: 50%)


.change
  color: change-color($orange-extra, $lightness: 40%, $alpha: .8)


.function
  color: test($hexVar)


.rgb
  color: $rgb


.rgba
  color: $rgba


.hsl
  color: $hsl


.hsla
  color: $hsla


.rgba-enabled
  color: rgba($hexVar, .3)

.some-element
  border-bottom: 1px solid rgba($light-gray, 0.5)
  color: rgba(shade($some-color), 0.5)

.color
  border: 1px solid var(--white)
  color: rgba(var(--my-color), 0.5)
